<template>
    <div>
        <!-- 售保单汇总报表 -->
        <div class="container">
            <!-- 标题栏 -->
            <div class="headstyple">
                <el-row>
                    <el-col :span="16" class="ticket-title">报表>移动支付-移动支付订单明细表</el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="QueryData">
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_xin_default.png" alt="" class="btn-img">新窗口
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_dayin_default.png" alt="" class="btn-img">直接打印
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_daochu_default.png" alt="" class="btn-img">导出
                        </button>
                    </el-col>
                </el-row>
            </div>
            <div class="bottom-container">
                <el-form :model="formList" :inline="true" class="ticketForm" id="summarySheet">
                    <el-form-item label="操作时间起">
                        <el-date-picker type="datetime" size="mini" class="minipt" default-time="00:00:00"
                                        v-model="formList.starDate" value-format="yyyy-MM-dd-HH:mm:ss"></el-date-picker>
                        止
                        <el-date-picker type="datetime" size="mini" class="minipt" default-time="23:59:59"
                                        v-model="formList.endDate" value-format="yyyy-MM-dd-HH:mm:ss"></el-date-picker>
                        <span><img src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="btn-time"
                                   @click="sysdateinfo(1)"></span>
                    </el-form-item>
                    <el-form-item label="机构" size="small">
                        <el-select multiple v-model="formList.orgname" size="medium" class="minipt">
                            <el-option
                                    v-for="item in orgnameList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                <span style="float: left">{{ item.no }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单状态" size="small">
                        <el-select size="small" v-model="formList.OrderStatus" @change="GetStatuslabel">
                            <el-option v-for="(item) in OrderStatusList"
                                       :key="item.key"
                                       :label="item.value"
                                       :value="item.key"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <template>
                <div v-html="Report" class="Report"></div>
            </template>

        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--弹窗页面部分-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <!-- 修改弹窗 -->
                        <div>
                            <el-row class="driver-container">
                                <el-col>
                                    <div>
                                        <el-table style="width: 100%" :data="DatetableData" height="290px"
                                                  @row-dblclick="sysdate">
                                            <el-table-column type="index" width="20px"></el-table-column>
                                            <el-table-column prop="date_name" label="名称"></el-table-column>
                                            <el-table-column prop="date_start" label="起始日期"></el-table-column>
                                            <el-table-column prop="date_end" label="结束日期"></el-table-column>
                                            <el-table-column prop="beizhu" label="备注"></el-table-column>
                                        </el-table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <button class="check-btn rf" @click="closeformwindows"><img
                            src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt=""
                            class="btn-img">取消
                    </button>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";
    import qs from "qs";

    export default {

        data() {
            return {
                formList: {
                    starDate: "",
                    endDate: "",
                    orgname: [],
                    OrderStatus: "",
                },
                orgnameList: [],

                Report: "",

                modelShow: false,
                modalTitle: "",
                DatetableData: [],
                infotype: "",

                Statuslabel: "",

                OrderStatusList: [],

            };
        },

        methods: {
            //机构列表
            loadbusstation() {
                this.$http
                    .post("/sys/org/nameList")
                    .then(data => {
                        this.orgnameList = data.data;
                        console.log(data)
                    })
            },

            //订单状态列表
            getnoncashOrderStatus() {
                this.$http
                    .post("/common/constant/noncashOrderStatus")
                    .then(data => {
                        for (var a of data.data) {
                            this.OrderStatusList.push({
                                key: a.value,
                                value: a.key,
                            })
                        }

                    })
            },

            GetStatuslabel(val) {
                let obj = {};
                obj = this.OrderStatusList.find((item) => {
                    return item.value === val;
                });
                console.log(obj);
                if (obj != "" && obj != undefined) {
                    this.Statuslabel = obj.label;
                }

            },


            //获取弹窗
            sysdateinfo(info) {
                console.log(info);
                this.infotype = info;
                this.getsysdate();

                this.modelShow = true;
                this.modalTitle = "选择日期";
                console.log(this.modelShow);
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //关闭弹窗
            closeformwindows() {
                this.modelShow = false;
            },
            //获取弹窗时间数据
            getsysdate() {
                this.DatetableData = [];
                this.$http
                    .post("/sys/customdatescope/list")
                    .then(data => {
                        console.log(data.data);
                        console.log(data.data.list);
                        for (var item of data.data.list) {
                            this.DatetableData.push({
                                id: item.id,
                                date_name: item.name,
                                date_start: item.start_date,
                                date_end: item.end_date,
                                beizhu: item.remark,
                            })
                        }
                    })
            },
            //双击获取自定义日期
            sysdate(row, event) {
                console.log(row);
                if (this.infotype == 1) {
                    this.formList.starDate = row.date_start + " 00:00:00";
                    this.formList.endDate = row.date_end + " 23:59:59";
                } else if (this.infotype == 2) {
                    this.formList.busdatestart = row.date_start;
                    this.formList.busdateend = row.date_end;
                }
                this.modelShow = false;
            },
            //时间处理,获取当天时间
            todayfunction() {
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                console.log(nowday);
                this.formList.starDate = nowday + " 00:00:00";
                this.formList.endDate = nowday + " 23:59:59";
            },
            //encodeURI 编码
            QueryData() {
                console.log(this.formList.orgname);
                //通过select的机构选择框，获取其名称
                let getorgnames = [];
                let getorgids = this.formList.orgname;
                if (getorgids.length > 0) {
                    for (let item of getorgids) {
                        for (let temp of this.orgnameList) {
                            if (item == temp.id) {
                                getorgnames.push(temp.name);
                                continue;
                            }
                        }
                    }
                    //通过select的订单选择框，获取其名称
                    let getStatusnames = [];
                    let getStatusids = this.formList.OrderStatus;
                    if (getStatusids.length > 0) {
                        for (let item of getStatusids) {
                            for (let temp of this.orgnameList) {
                                if (item == temp.id) {
                                    getStatusnames.push(temp.name);
                                    continue;
                                }
                            }
                        }
                    }

                        let parm = '[{"text":"机构:","field":"orgs","value":"' + getorgids + '","valuename":"' + getorgnames + '"},' +
                            '{"text":"操作时间起:","field":"be_oper","op":"dge","value":"' + this.formList.starDate + '","valuename":"' + this.formList.starDate + '"},' +
                            '{"text":"订单状态:","field":"noncash_order_status","op":"eq","value":"' + getStatusids + '","valuename":"' + getStatusnames + '"}' +
                            '{"text":"止:","field":"ed_oper","op":"dle","value":"' + this.formList.endDate + '","valuename":"' + this.formList.endDate + '"}]';
                        let sqlparm = '{"orgs":"' + getorgids[getorgids.length - 1] + '",' +
                            '"be_oper":"' + this.formList.starDate + '","ed_oper":"' + this.formList.endDate + '",' +
                            '"noncash_order_status":"' + getStatusids[getStatusids.length - 1] + '"}';
                        //编码
                        let encodeparm = encodeURIComponent(parm);
                        let encodesqlparm = encodeURIComponent(sqlparm);
                        let rpT = encodeURIComponent("移动支付");
                        let rpN = encodeURIComponent("移动支付订单明细表");

                        this.$http
                            .get(
                                '/reports',
                                {
                                    params: {
                                        rpType: rpT,
                                        rpName: rpN,
                                        protype: 98,
                                        rpparajson: encodeparm,
                                        sqlparajson: encodesqlparm,
                                    }
                                }
                            )
                            .then(data => {

                                this.Report = data.data;

                            })
                    }
                }
            ,


            },
            mounted() {
                this.loadbusstation();
                this.todayfunction();
                this.getnoncashOrderStatus();

            },
        }
</script>
<style scoped>
    @import url('../../assets/css/Report/Report.css');

    .check-btn {
        width: 100px;
    }

    .el-form--inline .el-form-item {
        margin-right: 130px;
    }

    #summarySheet .el-date-editor.el-input {
        width: 174px !important;
    }

    .minipt {
        width: 300px;
    }

    .Report {
        overflow-x: scroll;

    }

</style>
